<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">

        <div class="btn_wrapper">
          <span style="font-size: 12px; color: pink;">说明：目前支持学科和关键字条件筛选</span>
           <el-button @click="$router.push('new/')" type="success" class="el-button--small">
            <i class="el-icon-edit"></i>
            新增试题
            </el-button>
        </div>

        <questions-form
          @cUpdateQuestion="cUpdateQuestion"
          :updateQues.sync="headerData"
          @updateQues="updateQues" />

          <el-alert
            :closable="false"
            show-icon
            type="info"
            style="margin-bottom:15px"
            :title="description"
            >
          </el-alert>

        <el-table :data="questionData" style="width: 100%">
          <el-table-column prop="number" label="试题编号">
          </el-table-column>
          <el-table-column prop="subject" label="学科">
          </el-table-column>
          <el-table-column prop="catalog" label="目录">
          </el-table-column>
          <el-table-column label="题型">
            <template v-slot="{row}">
              <span v-if="row.questionType === '1'">单选</span>
              <span v-else-if="row.questionType === '2'">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干">
            <template v-slot="{row}">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间">
            <template v-slot="{row}">
               {{ FormatDateTime(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column label="难度">
             <template v-slot="{row}">
              <span v-if="row.difficulty === '1'">简单</span>
              <span v-else-if="row.difficulty === '2'">一般</span>
              <span v-else>困难</span>
            </template>
          </el-table-column>
          <el-table-column prop="enterprise" label="录入人">
          </el-table-column>
          <el-table-column label="操作" width="250px">
            <template v-slot="{row}">
                <el-button @click="Find(row.id)" style="font-size:12px;" type="primary" icon="el-icon-view" plain circle></el-button>
                <el-button @click="$router.push(`new/?id=${row.id}`)" style="font-size:12px;" type="success" icon="el-icon-edit" plain circle></el-button>
                <el-button @click="toDialog(-1,0,row)" style="font-size:12px;" type="danger" icon="el-icon-delete" plain circle></el-button>
                <el-button @click="toDialog(row.id,1)" style="font-size:12px;" type="warning" icon="el-icon-check" plain circle></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="text-align: right">
          <page-tool
          :paginationPage="page"
          :paginationPagesize="pagesize"
          :total="total"
          @pageChange="pageChange"
          @pageSizeChange="pageSizeChange"
          ></page-tool>
        </div>
        <questionsDialog
          ref="questionsDialog"
          :hType="hType"
          :isShowDialog="dialogVisible"
          :dialogID="dialogID"
          @updateData="updateData"
          @remove="hRemove"
          ></questionsDialog>

        <questions-preview
          ref="popUp"
          :showDialogVisible.sync="viewDialog"
          :Id="viewId"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import questionsForm from '../components/questions-form.vue'
import questionsDialog from '../components/questions-dialog.vue'
import { list, remove } from '@/api/hmmm/questions'
import dayjs from 'dayjs'
import pageTool from '../../module-dashboard/components/pageTool.vue'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  components: { questionsForm, pageTool, questionsDialog, QuestionsPreview },
  data () {
    return {
      questionData: [],
      page: 1,
      pagesize: 5,
      total: '',
      description: '',
      dialogVisible: false,
      dialogID: '', // 对话框显示隐藏
      viewDialog: false, // 预览显示框
      viewId: '', // 预览显示框Id
      hType: '', // 判断点击的是哪个按钮 删除:0 添加是1
      itemsData: {},
      headerData: {} // 获取头部表单数据
    }
  },
  created () {
    this.hQuestion()
  },
  methods: {
    cUpdateQuestion () {
      this.headerData = {}
      this.hQuestion()
    },
    updateData () {
      if (this.questionData.length === 1) {
        this.page--
      }
      this.hQuestion()
    },
    Find (id) {
      console.log(id)
      this.viewId = id
      this.viewDialog = true
      this.$nextTick(() => {
        this.$refs.popUp.getInfo()
      })
    },
    toDialog (id, type, itemsData) {
      if (itemsData) this.itemsData = itemsData
      this.dialogVisible = true
      this.dialogID = +id
      this.hType = type
      this.$nextTick(() => {
        this.$refs.questionsDialog.getChoice()
      })
      this.hQuestion()
    },
    async hRemove () {
      // console.log(this.itemsData)
      await remove(this.itemsData)
      if (this.questionData.length === 1) {
        this.page--
      }
      this.$message.success('删除成功')
      this.hQuestion()
    },
    updateQues (obj) {
      // console.log(this.headerData)
      // this.questionData = obj.items
      this.hQuestion()
    },
    pageSizeChange (pagesize) {
      this.pagesize = pagesize
      this.page = 1
      this.hQuestion()
    },
    pageChange (page) {
      this.page = page
      this.hQuestion()
    },
    async hQuestion () {
      if (!this.headerData) {
        this.res = await list({ page: this.page, pagesize: this.pagesize })
      } else {
        this.res = await list({ page: this.page, pagesize: this.pagesize, ...this.headerData })
      }
      this.questionData = this.res.data.items
      this.total = this.res.data.counts
      this.description = '数据一共' + this.total + '条'
    },
    // 格式化时间
    FormatDateTime (t) {
      return dayjs(t).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
    padding: 0 10px;
    margin: 10px 0;
  .btn_wrapper {
    margin-bottom: 15px;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
  }
}
</style>
